<template>
	<view class="content">
		<!-- 背景图 -->
		<image class="img-bg" src="/static/images/bg_new1.gif" mode=""></image>
		<!-- logo图 -->
		<image class="img-logo" src="/static/images/logo.png"></image>
		<!-- 表单 -->
		<!-- 用户名 -->
		<view class="input-area">
			<image src="/static/images/user.png" mode=""></image>
			<input type="text" placeholder="用户名/手机号" />
		</view>
		<!-- 密码框 -->
		<view class="input-area-pwd">
			<image src="/static/images/mima.png" mode=""></image>
			<input :type="pwd_type" placeholder="密码" />
			<image @click="pwd_visible = !pwd_visible" :src="pwd_icon" mode=""></image>
		</view>
		<!-- 登录按钮 -->
		<view class="btn-login" hover-class="active">登录</view>
		<!-- 用户操作区域 -->
		<view class="account-area">
			<!-- view*2 tab键生成多对标签 -->
			<view hover-class="active">忘记密码?</view>
			<view hover-class="active">立即注册</view>
		</view>
		<!-- 第三方登录 -->
		<view class="bottom">
			<!-- 横线和文字 -->
			<view>
				<view class="line"></view>
				<view>第三方直接登录</view>
				<view class="line"></view>
			</view>
			<view>
				<!-- <view><image src="/static/images/qq.jpg" mode=""></image></view> -->
				<view><image src="/static/images/qq_new.png" mode=""></image></view>
				<view><image src="/static/images/wx_new.png" mode=""></image></view>
				<view><image src="/static/images/wb_new.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 密码显示的状态  默认不显示
			pwd_visible: false
		};
	},
	computed: {
		// input type值和 图片是根据是否允许查看密码的状态改变
		// 这里通过计算属性处理
		// pwd_visible 是否显示密码的状态
		pwd_type() {
			return this.pwd_visible ? 'text' : 'password';
		},
		pwd_icon() {
			return this.pwd_visible
				? '/static/images/eye.png'
				: '/static/images/eye-close.png';
		}
	},
	methods: {
		// doEye() {
		// 	// console.log('眼睛点击');
		// 	this.pwd_visible = !this.pwd_visible;
		// }
	}
};
</script>

<style lang="scss">
// 底部第三方登录
.bottom {
	position: fixed;
	bottom: 150rpx;
	left: 0;
	right: 0;
	padding: 0 100rpx;
	// 第三方登录 文字
	> view:first-child {
		color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		> .line {
			height: 1px;
			background-color: white;
			width: 150rpx;
		}
	}
	// 图片的view
	> view:last-child {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		// 图片外的view
		> view {
			padding: 10rpx;
			border-radius: 50%;
			overflow: hidden;
			// background-color: white;
		}
		// 图片大小
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}
// 点击透明效果
.active {
	opacity: 0.6;
}
// 账户操作区域
.account-area {
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	view {
		color: gray;
		text-decoration: underline;
	}
}
// 登录按钮
.btn-login {
	background-color: rgb(255, 165, 7);
	color: white;
	padding: 30rpx;
	border-radius: 8rpx;
	text-align: center;
	margin-top: 40rpx;
}
// 文本框  用户
.input-area {
	// logo的上边距
	margin-top: 100rpx;
	background-color: white;
	padding: 10rpx;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	> image {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}
	> input {
		// 把整个元素框占满  自动缩放 填充所有空间
		flex: 1;
		margin: 20rpx;
	}
}
// 密码框
.input-area-pwd {
	// 与用户框的上边距
	margin-top: 30rpx;
	background-color: white;
	padding: 10rpx;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	> image {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}
	> input {
		// 把整个元素框占满  自动缩放 填充所有空间
		flex: 1;
		margin: 20rpx;
	}
}
// 背景图
.img-bg {
	// 浮动
	position: fixed;
	// 靠左
	left: 0;
	// 靠顶
	top: 0;
	// 宽高100%
	width: 100%;
	height: 100%;
	// -1 下一层
	z-index: -1;
	// 滤镜  模糊效果
	// filter: blur(2px);
}
// logo
.img-logo {
	// 背景色
	background-color: white;
	// 圆角
	border-radius: 7rpx;
	// 宽高
	width: 400rpx;
	height: 100rpx;
	// 主轴自居中
	align-self: center;
}
// 整个页面内容
.content {
	// 布局方式  弹性布局
	display: flex;
	// 排列方式 默认row 横向  column垂直
	flex-direction: column;
	// 内填充
	padding: 100rpx;
}
</style>
